<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" width="520px" :title="dialogProps.title">
    <div style="height: 500px; overflow-y: auto">
      <ProTable
        ref="proTable"
        row-key="id"
        :tool-button="false"
        :margin-border="false"
        :indent="20"
        :init-param="dialogProps.initParam"
        :columns="columns"
        :request-api="dialogProps.api"
      >
        <template #name="scope">
          <el-input v-model="scope.row.name" @blur="editMethod(scope.row)" />
        </template>
        <template #operation="scope">
          <el-popconfirm title="是否确认删除?" @confirm="deleteAccount(scope.row)">
            <template #reference>
              <el-button type="primary" link :icon="Delete"> 删除 </el-button>
            </template>
          </el-popconfirm>
          <!-- <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"> 删除 </el-button> -->
        </template>
      </ProTable>
    </div>
  </el-dialog>
</template>

<script setup lang="ts" name="UserDrawer">
import { ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { Goods } from "@/api/interface";
import { Delete } from "@element-plus/icons-vue";
// import { deleteFoodtaskcategory } from "@/api/modules/goods";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";

const proTable = ref<ProTableInstance>();
interface DialogProps {
  title: string;
  isView: boolean;
  row: Partial<Goods.ParentFoodtaskList>;
  columns?: [];
  initParam?: any;
  api?: (params: any) => Promise<any>;
  edgapi?: (params: any) => Promise<any>;
  delapi?: (params: any) => Promise<any>;
  getTreeFilter?: () => void;
}

const dialogVisible = ref(false);
const dialogProps = ref<DialogProps>({
  isView: false,
  title: "",
  row: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogProps) => {
  dialogProps.value = params;
  dialogVisible.value = true;
};

const columns: ColumnProps<Goods.ParentFoodtaskList>[] = [
  { type: "index", label: "序号", width: 80 },
  { prop: "name", label: "名称", align: "left" },
  { prop: "operation", label: "操作", width: 120, align: "right" }
];
const emit = defineEmits(["upTree"]);
const editMethod = async (row: Goods.ParentFoodtaskList) => {
  await dialogProps.value!.edgapi!({ id: row.id, name: row.name });
  emit("upTree");
};

// 删除做法分组
const deleteAccount = async (params: Goods.ParentFoodtaskList) => {
  await dialogProps.value!.delapi!({ id: params.id });
  proTable.value?.getTableList();
  emit("upTree");
};

defineExpose({
  acceptParams
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
  max-height: 500px;
  padding: 0 !important;
}
</style>
